

<!DOCTYPE html>
<html lang="zh-CN" data-default-color-scheme=&#34;auto&#34;>



<head>
  <meta charset="UTF-8">
  <link rel="apple-touch-icon" sizes="76x76" href="/img/favicon.png">
  <link rel="icon" type="image/png" href="/img/favicon.png">
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  
  <meta name="theme-color" content="#2f4154">
  <meta name="description" content="CodeHope">
  <meta name="author" content="CodeHope">
  <meta name="keywords" content="希望">
  <title>JavaScript基础面试记录 - CodeHope</title>

  <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" />


  <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/github-markdown-css@4.0.0/github-markdown.min.css" />
  <link  rel="stylesheet" href="/lib/hint/hint.min.css" />

  
    
    
      
      
        
          
          
          
        
        <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs@1.22.0/themes/prism-tomorrow.min.css" />
      
      
        <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs@1.22.0/plugins/line-numbers/prism-line-numbers.min.css" />
      
    
  

  
    <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />
  



<!-- 主题依赖的图标库，不要自行修改 -->

<link rel="stylesheet" href="//at.alicdn.com/t/font_1749284_ba1fz6golrf.css">



<link rel="stylesheet" href="//at.alicdn.com/t/font_1736178_kmeydafke9r.css">


<link  rel="stylesheet" href="/css/main.css" />

<!-- 自定义样式保持在最底部 -->


  <script id="fluid-configs">
    var Fluid = window.Fluid || {};
    var CONFIG = {"hostname":"quancundexiwang.wang","root":"/","version":"1.8.7","typing":{"enable":true,"typeSpeed":70,"cursorChar":"_","loop":false},"anchorjs":{"enable":true,"element":"h1,h2,h3,h4,h5,h6","placement":"left","visible":"hover","icon":""},"progressbar":{"enable":true,"height_px":3,"color":"#29d","options":{"showSpinner":true,"trickleSpeed":100}},"copy_btn":true,"image_zoom":{"enable":true},"toc":{"enable":true,"headingSelector":"h1,h2,h3,h4,h5,h6","collapseDepth":0},"lazyload":{"enable":true,"onlypost":true},"web_analytics":{"enable":false,"baidu":null,"google":null,"gtag":null,"tencent":{"sid":null,"cid":null},"woyaola":null,"cnzz":null,"leancloud":{"app_id":"Mi65hxq7VAFUDwOLeIGAOgiV-gzGzoHsz","app_key":"hMuhiD4FRqhns4giqLiEH9HG","server_url":null}}};
  </script>
  <script  src="/js/utils.js" ></script>
  <script  src="/js/color-schema.js" ></script>
<meta name="generator" content="Hexo 5.3.0"></head>


<body>
  <header style="height: 80vh;">
    <nav id="navbar" class="navbar fixed-top  navbar-expand-lg navbar-dark scrolling-navbar">
  <div class="container">
    <a class="navbar-brand"
       href="/">&nbsp;<strong>CodeHope</strong>&nbsp;</a>

    <button id="navbar-toggler-btn" class="navbar-toggler" type="button" data-toggle="collapse"
            data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <div class="animated-icon"><span></span><span></span><span></span></div>
    </button>

    <!-- Collapsible content -->
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ml-auto text-center">
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/">
                <i class="iconfont icon-home-fill"></i>
                村头
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/archives/">
                <i class="iconfont icon-archive-fill"></i>
                归档
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/categories/">
                <i class="iconfont icon-category-fill"></i>
                分类
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/tags/">
                <i class="iconfont icon-tags-fill"></i>
                标签
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/about/">
                <i class="iconfont icon-user-fill"></i>
                我
              </a>
            </li>
          
        
        
          <li class="nav-item" id="search-btn">
            <a class="nav-link" data-toggle="modal" data-target="#modalSearch">&nbsp;<i
                class="iconfont icon-search"></i>&nbsp;</a>
          </li>
        
        
          <li class="nav-item" id="color-toggle-btn">
            <a class="nav-link" href="javascript:">&nbsp;<i
                class="iconfont icon-dark" id="color-toggle-icon"></i>&nbsp;</a>
          </li>
        
      </ul>
    </div>
  </div>
</nav>

    <div class="banner" id="banner" parallax=true
         style="background: url('https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1100304840,1265248222&fm=26&gp=0.jpg') repeat center center;
           background-size: cover;">
      <div class="full-bg-img">
        <div class="mask flex-center" style="background-color: rgba(0, 0, 0, 0.3)">
          <div class="page-header text-center fade-in-up">
            <span class="h2" id="subtitle" title="JavaScript基础面试记录">
              
            </span>

            
              <div class="mt-3">
  
  
    <span class="post-meta">
      <i class="iconfont icon-date-fill" aria-hidden="true"></i>
      <time datetime="2020-08-26 22:13" pubdate>
        2020年8月26日 晚上
      </time>
    </span>
  
</div>

<div class="mt-1">
  
    
    <span class="post-meta mr-2">
      <i class="iconfont icon-chart"></i>
      5k 字
    </span>
  

  
    
    <span class="post-meta mr-2">
      <i class="iconfont icon-clock-fill"></i>
      
      
      60
       分钟
    </span>
  

  
  
</div>

            
          </div>

          
            <div class="scroll-down-bar">
              <i class="iconfont icon-arrowdown"></i>
            </div>
          
        </div>
      </div>
    </div>
  </header>

  <main>
    
      

<div class="container-fluid nopadding-x">
  <div class="row nomargin-x">
    <div class="d-none d-lg-block col-lg-2"></div>
    <div class="col-lg-8 nopadding-x-md">
      <div class="container nopadding-x-md" id="board-ctn">
        <div class="py-5" id="board">
          <article class="post-content mx-auto">
            <!-- SEO header -->
            <h1 style="display: none">JavaScript基础面试记录</h1>
            
            <div class="markdown-body">
              <h2 id="1-防抖"><a href="#1-防抖" class="headerlink" title="1.防抖"></a>1.防抖</h2><p>防抖就是在用户页面进行交互操作时，频繁做一些不必要的操作，例如频繁点击一个请求的按钮，我们只需要让他最后一次成功！</p>
<p>在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。</p>
<p><img src="https://cdn.jsdelivr.net/gh/changhao970630/cdn@master/images/20200830102920.gif" srcset="/img/loading.gif"><br>代码</p>
<div class="code-wrapper"><pre class="line-numbers language-html" data-language="html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>input<span class="token punctuation">'</span></span><span class="token punctuation">></span></span>input<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>input</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">></span></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre></div>
<div class="code-wrapper"><pre class="line-numbers language-js" data-language="js"><code class="language-js"><span class="token operator">&lt;</span>script<span class="token operator">></span>
    <span class="token keyword">const</span> input <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">"#input"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    input<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"input"</span><span class="token punctuation">,</span><span class="token function">debounce</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span><span class="token operator">=></span><span class="token punctuation">&#123;</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>e<span class="token punctuation">.</span>target<span class="token punctuation">.</span>value<span class="token punctuation">)</span>
    <span class="token punctuation">&#125;</span><span class="token punctuation">)</span><span class="token punctuation">,</span><span class="token number">1000</span><span class="token punctuation">)</span>
    <span class="token keyword">function</span> <span class="token function">debounce</span><span class="token punctuation">(</span><span class="token parameter">fn<span class="token punctuation">,</span>delay<span class="token operator">=</span><span class="token number">500</span></span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
        <span class="token keyword">let</span> timer <span class="token operator">=</span> <span class="token keyword">null</span><span class="token punctuation">;</span>
        <span class="token keyword">return</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
            <span class="token keyword">if</span><span class="token punctuation">(</span>timer<span class="token punctuation">)</span><span class="token punctuation">&#123;</span><span class="token punctuation">&#125;</span><span class="token punctuation">&#123;</span>
                <span class="token function">clearTimeout</span><span class="token punctuation">(</span>timer<span class="token punctuation">)</span>
            <span class="token punctuation">&#125;</span>

            timer <span class="token operator">=</span> <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">=></span><span class="token punctuation">&#123;</span>
                console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span>
                <span class="token function">fn</span><span class="token punctuation">.</span><span class="token function">apply</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">,</span>arguments<span class="token punctuation">)</span><span class="token punctuation">;</span>
                timer <span class="token operator">=</span> <span class="token keyword">null</span><span class="token punctuation">;</span>
            <span class="token punctuation">&#125;</span><span class="token punctuation">,</span>delay<span class="token punctuation">)</span>
        <span class="token punctuation">&#125;</span>
    <span class="token punctuation">&#125;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<h2 id="2-JSONP的优缺点"><a href="#2-JSONP的优缺点" class="headerlink" title="2.JSONP的优缺点"></a>2.JSONP的优缺点</h2><ul>
<li>1.优点<ul>
<li> 不会像XMLHttpRequest对象实现的Ajax请求那样，受到同源策略产生跨域问题，<strong>JSONP可以跨越同源策略；</strong></li>
<li> <strong>兼容性更好</strong>，在更加古老的浏览器中都可以运行，<strong>不需要XMLHttpRequest或ActiveX的支持</strong></li>
<li> 在请求完毕后可以通过调用callback的方式回传结果。将回调方法的权限给了调用方。这个就相当于 <strong>将controller层和view层终于分开了。</strong> 我提供的jsonp服务只提供纯服务的数据，至于提供服务以 后的页面渲染和后续view操作都由调用者来自己定义就好了。如果有两个页面需要渲染同一份数据，你们只需要有不同的渲染逻辑就可以了，逻辑都可以使用同 一个jsonp服务。</li>
</ul>
</li>
</ul>
<ul>
<li><p>2.缺点</p>
<ul>
<li>它只支持GET请求而不支持POST等其它类型的HTTP请求 </li>
<li>它只支持跨域HTTP请求这种情况，不能解决不同域的两个页面之间如何进行JavaScript调用的问题</li>
<li>jsonp在 <strong>调用失败的时候不会返回各种HTTP状态码</strong> 。</li>
<li>缺点是安全性。万一假如提供<strong>jsonp的服务存在页面注入漏洞</strong>，即<strong>它返回的javascript的内容被人控制的。</strong></li>
</ul>
</li>
</ul>
<h2 id="3-缓存机制"><a href="#3-缓存机制" class="headerlink" title="3.缓存机制"></a>3.缓存机制</h2><p><font style="color:red;font-size:20px">Web 缓存大致可以分为：</font></p>
<ul>
<li>数据库缓存;</li>
<li>服务器端缓存（代理服务器缓存、CDN缓存）</li>
<li>浏览器缓存;</li>
</ul>
<p><font style="color:red;font-size:20px">浏览器 缓存大致可以分为：</font></p>
<ul>
<li> HTTP 缓存</li>
<li> indexDB</li>
<li> cookie</li>
<li> localstorage/sessionstorage</li>
</ul>
<p>昨天被问到<strong>http缓存机制</strong>，在具体了解 HTTP 缓存之前先来明确几个术语：</p>
<ul>
<li><strong>缓存命中率</strong>：从缓存中得到数据的请求数与所有请求数的比率。理想状态是越高越好。</li>
<li><strong>过期内容</strong>：超过设置的有效时间，被标记为“陈旧”的内容。通常过期内容不能用于回复客户端的请求，必须重新向源服务器请求新的内容或者验证缓存的内容是否仍然准备。</li>
<li><strong>验证</strong>：验证缓存中的过期内容是否仍然有效，验证通过的话刷新过期时间。</li>
<li><strong>失效</strong>：失效就是把内容从缓存中移除。当内容发生改变时就必须移除失效的内容。</li>
</ul>
<p><font style="color:red;font-size:20px">浏览器缓存分类</font></p>
<p style="color:blue;">浏览器缓存分为强缓存和协商缓存，浏览器加载一个页面的简单流程如下：</p>

<ul>
<li>浏览器先根据这个资源的http头信息来<strong>判断是否命中强缓存</strong>。<strong>如果命中</strong>则直接加载<strong>缓存中的资源</strong>，<strong>并不会将请求发送到服务器。</strong></li>
<li>如果<strong>未命中强缓存</strong>，则浏览器会<strong>将资源加载请求发送到服务器</strong>。<strong>服务器来判断浏览器本地缓存是否失效</strong>。若<strong>可以使用</strong>，则服务器并<strong>不会返回资源信息</strong>，浏览器<strong>继续从缓存加载资源。</strong></li>
<li>如果未命中协商缓存，则服务器会将完整的资源返回给浏览器，浏览器加载新资源，并更新缓存。</li>
</ul>
<p style="color:darkcyan">强缓存</p>

<blockquote>
<p>命中强缓存时，浏览器并不会将请求发送给服务器。在Chrome的开发者工具中看到http的返回码是200，但是在Size列会显示为(from cache)。</p>
</blockquote>
<p><img src="https://cdn.jsdelivr.net/gh/changhao970630/cdn@master/images/20200828103929.png" srcset="/img/loading.gif"></p>
<p>强缓存是利用http的返回头中的<span style="color:blue">Expires</span>或者<span style="color:blue">Cache-Control</span>两个字段来控制的，用来表示资源的缓存时间。</p>
<ul>
<li><p>Expires </p>
<blockquote>
<p>缓存过期时间，用来指定<strong>资源到期的时间</strong>，是<strong>服务器端</strong>的具体的时间点。</p>
</blockquote>
<blockquote>
<p>该字段会返回一个时间，比如Expires:Thu,31 Dec 2037 23:59:59 GMT。这个时间代表着这个资源的失效时间,。这种方式<strong>有一个明显的缺点</strong>，由于<strong>失效时间是一个绝对时间</strong>，所以当<strong>客户端本地时间被修改以后</strong>，<strong>服务器与客户端时间偏差变大以后，就会导致缓存混乱</strong>。于是发展出了<strong>Cache-Control。</strong></p>
</blockquote>
</li>
<li><p>Cache-Control</p>
<blockquote>
<p><strong>Cache-Control是一个相对时间</strong>，例如Cache-Control:3600，代表着资源的有效期是3600秒。由于是相对时间，并且都是与客户端时间比较，所以服务器与客户端时间偏差也不会导致问题。</p>
</blockquote>
<blockquote>
<p>Cache-Control与Expires可以在服务端配置<strong>同时启用或者启用任意一个</strong>，<strong>同时启用的时候Cache-Control优先级高。</strong></p>
</blockquote>
</li>
</ul>
<p style="color:darkcyan">协商缓存</p>

<blockquote>
<p>若未命中强缓存，则浏览器会将请求发送至服务器。服务器根据http头信息中的Last-Modify/If-Modify-Since或Etag/If-None-Match来判断是否命中协商缓存。如果命中，则http返回码为304，浏览器从缓存中加载资源。</p>
</blockquote>
<ul>
<li><p>Last-Modify/If-Modify-Since</p>
<blockquote>
<p>浏览器首次请求一个资源的时候，服务器返回的header中会加上Last-Modify，Last-modify是一个时间标识该资源的最后修改时间，<br><img src="https://cdn.jsdelivr.net/gh/changhao970630/cdn@master/images/20200828105940.png" srcset="/img/loading.gif"></p>
</blockquote>
<blockquote>
<p>当浏览器再次请求该资源时，发送的请求头中会包含If-Modify-Since，该值为缓存之前返回的Last-Modify。服务器收到If-Modify-Since后，根据资源的最后修改时间判断是否命中缓存。命中缓存返回304状态码。<br><img src="https://cdn.jsdelivr.net/gh/changhao970630/cdn@master/images/20200828110422.png" srcset="/img/loading.gif"></p>
</blockquote>
<p>如果<strong>命中缓存</strong>，则返回h<strong>ttp304</strong>，并且<strong>不会返回资源内容</strong>，并且<strong>不会返回Last-Modify</strong>。由于<strong>对比的服务端时间</strong>，所以客户端与服务端时间差距不会导致问题。但是有时候通过最后修改时间来判断资源是否修改还是不太准确（资源变化了最后修改时间也可以一致）。于是出现了ETag/If-None-Match。</p>
</li>
</ul>
<p>与Last-Modify/If-Modify-Since<strong>不同的是</strong>，Etag/If-None-Match返回的是一个<strong>校验码</strong>（ETag: entity tag）。<font style="color:blue">ETag可以保证每一个资源是唯一的，资源变化都会导致ETag变化*。ETag值的变更则说明资源状态已经被修改。</font>服务器根据浏览器上发送的If-None-Match值来判断是否命中缓存。</p>
<h2 id="4-JS浮点数不精确的问题"><a href="#4-JS浮点数不精确的问题" class="headerlink" title="4.JS浮点数不精确的问题"></a>4.JS浮点数不精确的问题</h2><div class="code-wrapper"><pre class="line-numbers language-js" data-language="js"><code class="language-js"><span class="token comment">// 加法</span>
<span class="token number">0.1</span> <span class="token operator">+</span> <span class="token number">0.2</span> <span class="token operator">=</span> <span class="token number">0.30000000000000004</span>
<span class="token number">0.1</span> <span class="token operator">+</span> <span class="token number">0.7</span> <span class="token operator">=</span> <span class="token number">0.7999999999999999</span>
<span class="token number">0.2</span> <span class="token operator">+</span> <span class="token number">0.4</span> <span class="token operator">=</span> <span class="token number">0.6000000000000001</span>
 
<span class="token comment">// 减法</span>
<span class="token number">0.3</span> <span class="token operator">-</span> <span class="token number">0.2</span> <span class="token operator">=</span> <span class="token number">0.09999999999999998</span>
<span class="token number">1.5</span> <span class="token operator">-</span> <span class="token number">1.2</span> <span class="token operator">=</span> <span class="token number">0.30000000000000004</span>
 
<span class="token comment">// 乘法</span>
<span class="token number">0.8</span> <span class="token operator">*</span> <span class="token number">3</span> <span class="token operator">=</span> <span class="token number">2.4000000000000004</span>
<span class="token number">19.9</span> <span class="token operator">*</span> <span class="token number">100</span> <span class="token operator">=</span> <span class="token number">1989.9999999999998</span>
 
<span class="token comment">// 除法</span>
<span class="token number">0.3</span> <span class="token operator">/</span> <span class="token number">0.1</span> <span class="token operator">=</span> <span class="token number">2.9999999999999996</span>
<span class="token number">0.69</span> <span class="token operator">/</span> <span class="token number">10</span> <span class="token operator">=</span> <span class="token number">0.06899999999999999</span>
 
<span class="token comment">// 比较</span>
<span class="token number">0.1</span> <span class="token operator">+</span> <span class="token number">0.2</span> <span class="token operator">===</span> <span class="token number">0.3</span> <span class="token comment">// false</span>
<span class="token punctuation">(</span><span class="token number">0.3</span> <span class="token operator">-</span> <span class="token number">0.2</span><span class="token punctuation">)</span> <span class="token operator">===</span> <span class="token punctuation">(</span><span class="token number">0.2</span> <span class="token operator">-</span> <span class="token number">0.1</span><span class="token punctuation">)</span> <span class="token comment">// false</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<p><font style="color:red">导致原因</font></p>
<blockquote>
<p>JavaScript 内部只有一种数字类型Number，也就是说，<strong>JavaScript 语言的底层根本没有整数</strong>，所有数字都是以IEEE-754标准格式64位浮点数形式储存，1与1.0是相同的。<strong>因为有些小数以二进制表示位数是无穷的。JavaScript会把超出53位之后的二进制舍弃，</strong> 所以涉及小数的比较和运算要特别小心。</p>
</blockquote>
<p><font style="color:red">浮点数的存储</font></p>
<blockquote>
<p>JS的浮点数实现也是遵循IEEE 754标准，采用双精度存储（double precision），使用64位固定长度来表示，其中1位用来表示符号位，11位用来表示指数，52位表示尾数。</p>
</blockquote>
<ul>
<li>符号位(sign)：第1位是正负数符号位，0代表正数，1代表负数</li>
<li>指数位(Exponent)：中间11位存储指数，用来表示次方数</li>
<li>尾数位(mantissa)：最后的52位是尾数，超出部分自动进一舍零</li>
</ul>
<p>浮点数的计算步骤（0.1+0.2）</p>
<ul>
<li><ol>
<li>首先，十进制的0.1和0.2会转换成二进制的，但是由于浮点数用二进制表示是无穷的<div class="code-wrapper"><pre class="line-numbers language-js" data-language="js"><code class="language-js"><span class="token number">0.0001</span> <span class="token number">1001</span> <span class="token number">1001</span> <span class="token number">1001</span> <span class="token operator">...</span><span class="token punctuation">(</span><span class="token number">1001</span>循环<span class="token punctuation">)</span>
<span class="token number">0.2</span>——<span class="token operator">></span><span class="token number">0.0011</span> <span class="token number">0011</span> <span class="token number">0011</span> <span class="token number">0011</span> <span class="token operator">...</span><span class="token punctuation">(</span><span class="token number">0011</span>循环<span class="token punctuation">)</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span></span></code></pre></div>
IEEE754标准的64位双精度浮点数的小数部分最多支持53位二进制，<strong>多余的二进制数字被截断</strong>，所以两者相加之后的二进制之和是</li>
</ol>
<p><code>0.0100110011001100110011001100110011001100110011001101</code></p>
<p>将截断之后的二进制数字再转换为十进制，就成了0.30000000000000004，所以在计算时产生了误差</p>
</li>
</ul>
<p><font style="color:red">解决办法</font></p>
<ul>
<li><p>1.引用类库</p>
<ul>
<li>Math.js <a target="_blank" rel="noopener" href="https://mathjs.org/">https://mathjs.org/</a></li>
<li>decimal.js <a target="_blank" rel="noopener" href="http://mikemcl.github.io/decimal.js/">http://mikemcl.github.io/decimal.js/</a></li>
<li>big.js <a target="_blank" rel="noopener" href="http://mikemcl.github.io/big.js/">http://mikemcl.github.io/big.js/</a></li>
</ul>
</li>
<li><p>2.在知道小数位个数的前提下，可以考虑通过将浮点数放大倍数到整型(最后再除以相应倍数)，再进行运算操作，这样就能得到正确的结果了</p>
</li>
</ul>
<div class="code-wrapper"><pre class="line-numbers language-js" data-language="js"><code class="language-js"><span class="token number">0.1</span> <span class="token operator">+</span> <span class="token number">0.2</span> ——<span class="token operator">></span> <span class="token punctuation">(</span><span class="token number">0.1</span> <span class="token operator">*</span> <span class="token number">10</span> <span class="token operator">+</span> <span class="token number">0.2</span> <span class="token operator">*</span> <span class="token number">10</span><span class="token punctuation">)</span> <span class="token operator">/</span> <span class="token number">10</span> <span class="token comment">// 0.3</span>
<span class="token number">0.8</span> <span class="token operator">*</span> <span class="token number">3</span> ——<span class="token operator">></span> <span class="token punctuation">(</span> <span class="token number">0.85</span> <span class="token operator">*</span> <span class="token number">100</span> <span class="token operator">*</span> <span class="token number">3</span><span class="token punctuation">)</span> <span class="token operator">/</span> <span class="token number">100</span>         <span class="token comment">//2.4</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span></span></code></pre></div>
<h2 id="5-节流"><a href="#5-节流" class="headerlink" title="5.节流"></a>5.节流</h2><p>比如dom拖拽功能，但是在绑定拖拽事件的时候发现每当元素稍微移动一点便触发了大量的回调函数，</p>
<p>所以我们需要规定一个单位时间，在这个单位时间内，只能有一次触发事件的回调函数执行，如果在同一个单位时间内某事件被触发多次，只有一次能生效。</p>
<p><img src="https://cdn.jsdelivr.net/gh/changhao970630/cdn@master/images/20200830174318.gif" srcset="/img/loading.gif"> </p>
<div class="code-wrapper"><pre class="line-numbers language-html" data-language="html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">></span></span>
   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>dragbox<span class="token punctuation">"</span></span> <span class="token attr-name">draggable</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>true<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>   
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">></span></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre></div>
<div class="code-wrapper"><pre class="line-numbers language-js" data-language="js"><code class="language-js"><span class="token operator">&lt;</span>script<span class="token operator">></span>
    <span class="token keyword">const</span> dragEl <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">"#dragbox"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">function</span> <span class="token function">throttle</span><span class="token punctuation">(</span><span class="token parameter">fn<span class="token punctuation">,</span> delay <span class="token operator">=</span> <span class="token number">500</span></span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>
        <span class="token keyword">let</span> timer <span class="token operator">=</span> <span class="token keyword">null</span><span class="token punctuation">;</span>
        <span class="token keyword">return</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>
            <span class="token keyword">if</span> <span class="token punctuation">(</span>timer<span class="token punctuation">)</span> <span class="token keyword">return</span>
            timer <span class="token operator">=</span> <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">&#123;</span>
                <span class="token function">fn</span><span class="token punctuation">.</span><span class="token function">apply</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">,</span> arguments<span class="token punctuation">)</span>
                <span class="token function">clearTimeout</span><span class="token punctuation">(</span>timer<span class="token punctuation">)</span>
                timer <span class="token operator">=</span> <span class="token keyword">null</span><span class="token punctuation">;</span>
            <span class="token punctuation">&#125;</span><span class="token punctuation">,</span> delay<span class="token punctuation">)</span>
        <span class="token punctuation">&#125;</span>
    <span class="token punctuation">&#125;</span>
    dragEl<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"drag"</span><span class="token punctuation">,</span> <span class="token function">throttle</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">&#123;</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>e<span class="token punctuation">)</span>
    <span class="token punctuation">&#125;</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<p><img src="https://cdn.jsdelivr.net/gh/changhao970630/cdn@master/images/20200830180306.gif" srcset="/img/loading.gif"></p>
<p>可以看出就不会调用太多次回掉函数了。</p>
<h2 id="6-从输入URL到网页渲染出页面到过程"><a href="#6-从输入URL到网页渲染出页面到过程" class="headerlink" title="6.从输入URL到网页渲染出页面到过程"></a>6.从输入URL到网页渲染出页面到过程</h2><p>URL到网页</p>
<ul>
<li>1.输入域名，域名被dns服务器（Domain Name Server，域名服务器）解析为IP地址。</li>
<li>2.浏览器根据IP地址向服务器发出http请求。</li>
<li>3.服务器处理http请求，并返回给浏览器。</li>
</ul>
<p>渲染过程</p>
<ul>
<li>根据html代码生成dom树。</li>
<li>根据css代码生成cssom(css对象模型)。</li>
<li>然后dom树和cssom整合形成RenderTree.</li>
<li>根据RenderTree渲染页面。</li>
<li>遇到<code>&lt;script&gt;</code>，暂停，优先加载并执行js代码，完成后再继续。</li>
<li>直至把RenderTree.渲染完成</li>
</ul>
<h2 id="7-JavaScript中的堆和栈"><a href="#7-JavaScript中的堆和栈" class="headerlink" title="7.JavaScript中的堆和栈"></a>7.JavaScript中的堆和栈</h2><ul>
<li>1、堆（heap）是堆内存的简称。</li>
<li>2、栈（stack）是栈内存的简称。</li>
</ul>
<blockquote>
<p>堆栈，我们讲的就是内存的使用和分配了，没有寄存器的事，也没有硬盘的事。</p>
</blockquote>
<ul>
<li>javascript的<strong>基本类型就5种</strong>:<ul>
<li><strong>Undefined</strong></li>
<li><strong>Null</strong></li>
<li><strong>Boolean</strong></li>
<li><strong>Number</strong></li>
<li><strong>String</strong></li>
</ul>
</li>
</ul>
<blockquote>
<p><font style="color:#000000">它们都是直接<font style="background:yellow"><strong>按值</strong></font>存储在<font style="background:yellow"><strong>栈</strong></font>中的，</font><code>每种类型的数据占用的内存空间的大小是确定的</code>，并由<code>系统自动分配和自动释放</code>。这样带来的好处就是，<code>内存可以及时得到回收</code>，相对于堆来说，更加容易管理内存空间。</p>
</blockquote>
<hr>

<ul>
<li>javascript中其他类型的数据被称为<strong>引用类型的数据</strong><ul>
<li>对象(Object)</li>
<li>数组(Array)</li>
<li>函数(Function)</li>
<li>……</li>
</ul>
</li>
</ul>
<blockquote>
<p>它们是通过拷贝和new出来的，这样的数据存储于堆中。其实，说存储于堆中，也不太准确，因为，<code>引用类型的数据的地址指针是存储于栈中的</code>，当我们想要访问引用类型的值的时候，需要<code>先从栈中获得对象的地址指针</code>，然后，在<code>通过地址指针找到堆中的所需要的数据。</code></p>
</blockquote>
<p><font style="background:yellow">说来也是形象，<code>栈，线性结构，后进先出，便于管理。</code> <code>堆，一个混沌，杂乱无章，方便存储和开辟内存空间</code></font></p>
<div class="code-wrapper"><pre class="line-numbers language-js" data-language="js"><code class="language-js"><span class="token keyword">let</span> a <span class="token operator">=</span> <span class="token punctuation">&#123;</span>a<span class="token operator">:</span><span class="token number">1</span><span class="token punctuation">,</span>b<span class="token operator">:</span><span class="token number">2</span><span class="token punctuation">&#125;</span><span class="token punctuation">;</span> <span class="token comment">//在堆中开辟了一个空间存储引用类型数据，地址存在栈中。</span>

<span class="token keyword">let</span> b <span class="token operator">=</span>a<span class="token punctuation">;</span> <span class="token comment">//将引入地址赋给 b（这是一个浅拷贝的方式））</span>

b<span class="token punctuation">.</span>a <span class="token operator">=</span> <span class="token number">3</span><span class="token punctuation">;</span> <span class="token comment">//根据引用地址找到堆中的值，并改变了堆中数据的值。</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>a<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//当访问a地址，因为和b指向一个地方，所以a也被改变了。</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<p><img src="https://cdn.jsdelivr.net/gh/changhao970630/cdn@master/images/20200831113558.png" srcset="/img/loading.gif"></p>
<h2 id="8-作用域和闭包"><a href="#8-作用域和闭包" class="headerlink" title="8.作用域和闭包"></a>8.作用域和闭包</h2><h3 id="1-作用域"><a href="#1-作用域" class="headerlink" title="1.作用域"></a><font style="color:red">1.作用域</font></h3><ul>
<li>全局作用域</li>
<li>函数作用域</li>
<li>块级作用域（es6新特性)</li>
</ul>
<div class="code-wrapper"><pre class="line-numbers language-js" data-language="js"><code class="language-js"><span class="token operator">&lt;</span>script<span class="token operator">></span>

    <span class="token keyword">var</span> a <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span>
    <span class="token keyword">var</span> <span class="token function-variable function">fn1</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
        <span class="token keyword">var</span> b <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
    <span class="token punctuation">&#125;</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>a<span class="token punctuation">)</span> <span class="token comment">//1</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>b<span class="token punctuation">)</span> <span class="token comment">//ReferenceError: b is not defined</span>

<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<p>上面 a 变量所在的作用域为<code>全局作用域</code>，b在的作用域为<code>函数作用域</code></p>
<p><code>全局作用域</code>的变量可在<code>任何地方被访问</code>，而<code>函数作用域</code>只可以在<code>函数内部被访问</code>。</p>
<p>块级作用域：块作用域由 { } 包括，if语句和for语句里面的{ }也属于块作用域。</p>
<p>从es6新增的<code>const,let</code>以及es5的<code>var</code> 来体验一下块级作用域的样子</p>
<div class="code-wrapper"><pre class="line-numbers language-js" data-language="js"><code class="language-js"><span class="token operator">&lt;</span>script<span class="token operator">></span>

   <span class="token punctuation">&#123;</span>
       <span class="token keyword">let</span> a <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span>
       <span class="token keyword">var</span> b <span class="token operator">=</span> <span class="token number">2</span><span class="token punctuation">;</span>
       <span class="token keyword">const</span> c <span class="token operator">=</span> <span class="token number">3</span><span class="token punctuation">;</span>
   <span class="token punctuation">&#125;</span>

   <span class="token comment">//分别打印 a,b,c</span>

   console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>a<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//ReferenceError: a is not defined</span>

   console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>b<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//2</span>

   console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>c<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//ReferenceError: c is not defined</span>

<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<ul>
<li>var定义的变量，没有块的概念，可以跨块访问, 不能跨函数访问。</li>
<li>let定义的变量，只能在块作用域里访问，不能跨块访问，也不能跨函数访问。</li>
<li>const用来定义常量，使用时必须初始化(即必须赋值)，只能在块作用域里访问，而且不能修改。</li>
</ul>
<hr>

<h3 id="2-闭包"><a href="#2-闭包" class="headerlink" title="2.闭包"></a><font style="color:red">2.闭包</font></h3><ul>
<li>一个定义在函数作用域的函数,所以可以读取其他函数内部的变量。</li>
<li>可以向上寻找自己所处的作用域环境</li>
</ul>
<p>我们继续看这个例子</p>
<div class="code-wrapper"><pre class="line-numbers language-js" data-language="js"><code class="language-js"><span class="token operator">&lt;</span>script<span class="token operator">></span>

    <span class="token keyword">var</span> a <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span>
    <span class="token keyword">var</span> <span class="token function-variable function">fn1</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
        <span class="token keyword">var</span> b <span class="token operator">=</span> <span class="token string">"我是函数作用域中的变量"</span><span class="token punctuation">;</span>
    <span class="token punctuation">&#125;</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>a<span class="token punctuation">)</span> <span class="token comment">//1</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>b<span class="token punctuation">)</span> <span class="token comment">//ReferenceError: b is not defined</span>

<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<p>如果我们希望，做一些操作，让<code>fn1中的 变量 b 能在全局中被访问</code>，这里我们就需要闭包函数，放入fn1函数，使其能访问fn1函数作用域中的变量，然后通过某种形式，暴露给全局访问。</p>
<div class="code-wrapper"><pre class="line-numbers language-js" data-language="js"><code class="language-js"><span class="token keyword">var</span> a <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">fn1</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>
    <span class="token keyword">var</span> b <span class="token operator">=</span> <span class="token string">'我是函数作用域中的变量'</span><span class="token punctuation">;</span>
    <span class="token keyword">function</span> <span class="token function">fn2</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>
        <span class="token keyword">return</span> b<span class="token punctuation">;</span>
    <span class="token punctuation">&#125;</span>
    <span class="token keyword">return</span> fn2

<span class="token punctuation">&#125;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>a<span class="token punctuation">)</span> <span class="token comment">//1</span>

<span class="token keyword">const</span> b <span class="token operator">=</span> <span class="token function">fn1</span><span class="token punctuation">(</span><span class="token punctuation">)</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">b</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<p>这样就做到，全局可以访问到函数作用域内部的变量！</p>
<p>本质上：<code>闭包就是函数内部和函数外部的桥梁！</code></p>
<h3 id="3-闭包的用应用场景"><a href="#3-闭包的用应用场景" class="headerlink" title="3.闭包的用应用场景"></a><font style="color:red">3.闭包的用应用场景</font></h3><ul>
<li>1.比如我们做一个简单的计数器</li>
</ul>
<div class="code-wrapper"><pre class="line-numbers language-html" data-language="html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span><span class="token punctuation">></span></span>add<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">></span></span>0<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
    <span class="token comment">//比如我们做一个简单的计数器，每次我们点击按钮就加一</span>

    <span class="token keyword">var</span> count <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>

    <span class="token keyword">function</span> <span class="token function">add</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
        count<span class="token operator">+=</span><span class="token number">1</span><span class="token punctuation">;</span>
        <span class="token keyword">return</span> count<span class="token punctuation">;</span>
    <span class="token punctuation">&#125;</span>

    document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">"button"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function-variable function">onclick</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
        document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">"p"</span><span class="token punctuation">)</span><span class="token punctuation">.</span>innerHTML <span class="token operator">=</span> <span class="token function">add</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">&#125;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<p><img src="https://cdn.jsdelivr.net/gh/changhao970630/cdn@master/images/20200831152419.gif" srcset="/img/loading.gif"></p>
<p>虽然功能完成，但是我们看其中的几个问题</p>
<ul>
<li>count 是一个全局变量，可以在任何地方访问，数据不够安全。</li>
<li>如果函数被统一封装，换个地方使用就需要在每个使用的地方定义一个全局变量count，不够方便。</li>
</ul>
<p>这个时候我们就需要使用闭包，将我们的count放入函数作用域，一是解决数据只能在函数作用域内被访问，而且在引入其他js文件中，也不用重新创建变量。</p>
<div class="code-wrapper"><pre class="line-numbers language-js" data-language="js"><code class="language-js"><span class="token keyword">function</span> <span class="token function">add</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
    <span class="token keyword">var</span> count <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
    <span class="token keyword">return</span> count<span class="token operator">+=</span><span class="token number">1</span><span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">"button"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function-variable function">onclick</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
    document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">"p"</span><span class="token punctuation">)</span><span class="token punctuation">.</span>innerHTML <span class="token operator">=</span> <span class="token function">add</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<p><img src="https://cdn.jsdelivr.net/gh/changhao970630/cdn@master/images/20200831153459.gif" srcset="/img/loading.gif"></p>
<p><code>因为每次调用的时候，内部的count都会被重新定义为0，</code></p>
<p>正确代码code：</p>
<div class="code-wrapper"><pre class="line-numbers language-js" data-language="js"><code class="language-js"><span class="token keyword">function</span> <span class="token function">add</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
    <span class="token keyword">var</span> count <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
    <span class="token keyword">function</span> <span class="token function">b</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
        <span class="token keyword">return</span> count<span class="token operator">+=</span><span class="token number">1</span><span class="token punctuation">;</span>
    <span class="token punctuation">&#125;</span>
    <span class="token keyword">return</span> b
<span class="token punctuation">&#125;</span>

<span class="token comment">//add 函数作用域的count只会被定义一次，然后被暴露到全局持续被访问</span>
<span class="token keyword">const</span> c <span class="token operator">=</span> <span class="token function">add</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">"button"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function-variable function">onclick</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span> 
    <span class="token comment">//这里每次点击都操作的是被暴露出来的count</span>
    document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">"p"</span><span class="token punctuation">)</span><span class="token punctuation">.</span>innerHTML <span class="token operator">=</span> <span class="token function">c</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<p><img src="https://cdn.jsdelivr.net/gh/changhao970630/cdn@master/images/20200831152419.gif" srcset="/img/loading.gif"></p>
<p>注意：<code>count变量在内存中持续被访问，就无法被释放掉，就会产生内存泄漏问题（部分内存一直被占用）。</code><br>我们可以根据具体的应用场景将接受闭包函数的变量置空，就可以释放掉这个内存变量 <code>c =  null;</code></p>
<ul>
<li>2.闭包能封装对象的私有属性和方法。</li>
</ul>
<div class="code-wrapper"><pre class="line-numbers language-js" data-language="js"><code class="language-js"><span class="token keyword">function</span> <span class="token function">Person</span><span class="token punctuation">(</span><span class="token parameter">name</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>
       <span class="token keyword">var</span> age<span class="token punctuation">;</span>
       <span class="token keyword">function</span> <span class="token function">setAge</span><span class="token punctuation">(</span><span class="token parameter">num</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
           age <span class="token operator">=</span> num<span class="token punctuation">;</span>
       <span class="token punctuation">&#125;</span>
       <span class="token keyword">function</span> <span class="token function">getAge</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
           <span class="token keyword">return</span> age<span class="token punctuation">;</span>
       <span class="token punctuation">&#125;</span>
       <span class="token keyword">return</span> <span class="token punctuation">&#123;</span>
           name<span class="token punctuation">,</span>
           setAge<span class="token punctuation">,</span>
           getAge
       <span class="token punctuation">&#125;</span>
   <span class="token punctuation">&#125;</span>
   <span class="token keyword">const</span> p1<span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Person</span><span class="token punctuation">(</span><span class="token string">"常昊"</span><span class="token punctuation">)</span>
   p1<span class="token punctuation">.</span><span class="token function">setAge</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
   
   console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>p1<span class="token punctuation">.</span><span class="token function">getAge</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">//1 ->使用闭包在函数作用域外部访问函数作用域内部的变量</span>
   
   console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>p1<span class="token punctuation">.</span>age<span class="token punctuation">)</span><span class="token comment">//undefined ->  私有属性只能通过setAge和getAge访问</span>

   p1 <span class="token operator">=</span><span class="token keyword">null</span><span class="token punctuation">;</span> <span class="token comment">//当对象操作完成后，释放闭包持续占有的内存</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<h2 id="9-ES6模块与CommonJS模块有什么区别？"><a href="#9-ES6模块与CommonJS模块有什么区别？" class="headerlink" title="9.ES6模块与CommonJS模块有什么区别？"></a>9.ES6模块与CommonJS模块有什么区别？</h2><p>三个重大差异</p>
<p>当你导出一个值的时候</p>
<ul>
<li>1.<code>CommonJS</code> 模块输出的是<code>一个值的拷贝</code>，<code>ES6 模块</code>输出的是<code>值的引用</code>。</li>
<li>2.<code>CommonJS</code> 模块是<code>运行时加载</code>，<code>ES6 模块</code>是<code>编译时输出接口。</code></li>
<li>3.<code>CommonJS</code> 模块的<code>require()是同步加载模块</code>，<code>ES6 </code>模块的<code>import命令是异步加载</code>，有一个独立模块依赖的解析阶段。</li>
</ul>
<h2 id="10-你对this的了解"><a href="#10-你对this的了解" class="headerlink" title="10.你对this的了解"></a>10.你对this的了解</h2><blockquote>
<p>this的指向不是在编写时确定的,⽽是在执⾏时确定的.</p>
</blockquote>
<p>⾸先，在<code>默认情况下，this是指向全局对象的</code>，⽐如在<code>浏览器就是指向window</code>。</p>
<div class="code-wrapper"><pre class="line-numbers language-js" data-language="js"><code class="language-js">name <span class="token operator">=</span> <span class="token string">"Bale"</span><span class="token punctuation">;</span>
<span class="token keyword">function</span> <span class="token function">sayName</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>name<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span class="token punctuation">;</span>
<span class="token function">sayName</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//"Bale"</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<p>其次，如果函数被调⽤的位置存在上下⽂对象时，那么函数是被隐式绑定的。</p>
<div class="code-wrapper"><pre class="line-numbers language-js" data-language="js"><code class="language-js"><span class="token keyword">function</span> <span class="token function">f</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span> <span class="token keyword">this</span><span class="token punctuation">.</span>name <span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
<span class="token keyword">var</span> obj <span class="token operator">=</span> <span class="token punctuation">&#123;</span>
    name<span class="token operator">:</span> <span class="token string">"Messi"</span><span class="token punctuation">,</span>
    f<span class="token operator">:</span> f
<span class="token punctuation">&#125;</span><span class="token punctuation">;</span>
obj<span class="token punctuation">.</span><span class="token function">f</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//被调⽤的位置恰好被对象obj拥有，因此结果是Messi</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<p>显示改变this指向，常⻅的⽅法就是<code>call</code>、<code>apply</code>、<code>bind</code></p>
<div class="code-wrapper"><pre class="line-numbers language-js" data-language="js"><code class="language-js"><span class="token keyword">function</span> <span class="token function">f</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span> <span class="token keyword">this</span><span class="token punctuation">.</span>name <span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
<span class="token keyword">var</span> obj <span class="token operator">=</span> <span class="token punctuation">&#123;</span>
    name<span class="token operator">:</span> <span class="token string">"Messi"</span><span class="token punctuation">,</span>
<span class="token punctuation">&#125;</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> obj1 <span class="token operator">=</span> <span class="token punctuation">&#123;</span>
    name<span class="token operator">:</span> <span class="token string">"Bale"</span>
<span class="token punctuation">&#125;</span><span class="token punctuation">;</span>
<span class="token function">f</span><span class="token punctuation">.</span><span class="token function">bind</span><span class="token punctuation">(</span>obj<span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//Messi</span>
<span class="token comment">//由于bind将obj绑定到f函数上后返回⼀个新函数,因此需要再在后⾯加上括号进⾏执⾏,这是bind与apply和call的区别</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<p>最后，也是<code>优先级最⾼的绑定 new 绑定。</code></p>
<blockquote>
<p>⽤ new 调⽤⼀个构造函数，会创建⼀个新对象, 在创造这个新对象的过程中,新对象会⾃动绑定到Person对象的this上，那么 this ⾃然就指向这个新对象。</p>
</blockquote>
<div class="code-wrapper"><pre class="line-numbers language-js" data-language="js"><code class="language-js"><span class="token keyword">function</span> <span class="token function">Person</span><span class="token punctuation">(</span><span class="token parameter">name</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>name <span class="token operator">=</span> name<span class="token punctuation">;</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>name<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
<span class="token keyword">var</span> person1 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Person</span><span class="token punctuation">(</span><span class="token string">'Messi'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//Messi</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<blockquote>
<p>绑定优先级: new绑定 &gt; 显式绑定 &gt;隐式绑定 &gt;默认绑定</p>
</blockquote>
<h2 id="11-箭头函数的this指向哪⾥？"><a href="#11-箭头函数的this指向哪⾥？" class="headerlink" title="11.箭头函数的this指向哪⾥？"></a>11.箭头函数的this指向哪⾥？</h2><blockquote>
<p>箭头函数不同于传统JavaScript中的函数,箭头函数并没有属于⾃⼰的this,</p>
</blockquote>
<blockquote>
<p>它的所谓的this是捕获其所在上下⽂的 this值，作为⾃⼰的 this 值,并且由于没有属于⾃⼰的this,⽽箭头函数是不会被new调⽤的，这个所谓的this也不会被改变.</p>
</blockquote>
<div class="code-wrapper"><pre class="line-numbers language-js" data-language="js"><code class="language-js"><span class="token comment">// ES6</span>
<span class="token keyword">const</span> obj <span class="token operator">=</span> <span class="token punctuation">&#123;</span>
        <span class="token function">getArrow</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>
            <span class="token keyword">return</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">&#123;</span>
                console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span> <span class="token operator">===</span> obj<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">&#125;</span><span class="token punctuation">;</span>
    <span class="token punctuation">&#125;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<p> ES5，由 Babel 转译</p>
<div class="code-wrapper"><pre class="line-numbers language-js" data-language="js"><code class="language-js"><span class="token keyword">var</span> obj <span class="token operator">=</span> <span class="token punctuation">&#123;</span>
    <span class="token function-variable function">getArrow</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token function">getArrow</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>
        <span class="token keyword">var</span> _this <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">;</span>
        <span class="token keyword">return</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>_this <span class="token operator">===</span> obj<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">&#125;</span><span class="token punctuation">;</span>
    <span class="token punctuation">&#125;</span>
<span class="token punctuation">&#125;</span><span class="token punctuation">;</span>


<span class="token operator">></span>  <span class="token punctuation">(</span>Date<span class="token operator">:</span><span class="token number">2020</span><span class="token operator">/</span><span class="token number">9</span><span class="token operator">/</span><span class="token number">2</span><span class="token punctuation">)</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<h2 id="12-typeof的返回值类型-六种"><a href="#12-typeof的返回值类型-六种" class="headerlink" title="12.typeof的返回值类型(六种)"></a>12.typeof的返回值类型(六种)</h2><ul>
<li><code>1.number</code></li>
<li><code>2.string</code></li>
<li><code>3.boolean</code></li>
<li><code>4.object</code></li>
<li><code>5.function</code> ( Function 外的所有构造函数的类型都是 ‘object’)</li>
<li><code>6.undefined</code></li>
</ul>
<h2 id="13-使用原生js做到跨标签页面传值"><a href="#13-使用原生js做到跨标签页面传值" class="headerlink" title="13.使用原生js做到跨标签页面传值"></a>13.使用原生js做到跨标签页面传值</h2><blockquote>
<p>面试的时候被问到，原生js tab标签页面之间交互的问题，用了太久框架，有点回答的不是很好。回来实现一下。（其实挺简单的～～！）<br><code>tab1.html</code></p>
</blockquote>
<div class="code-wrapper"><pre class="line-numbers language-html" data-language="html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">></span></span>
    tab1
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>tab2.html<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>跳转标签<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">></span></span>tab2输入的值<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>fromTab2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
    <span class="token keyword">const</span> btn <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">"button"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> fromTab2 <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">"#fromTab2"</span><span class="token punctuation">)</span>
    <span class="token keyword">let</span> tab2Window
    btn<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">&#123;</span>
        <span class="token keyword">if</span><span class="token punctuation">(</span>tab2Window<span class="token operator">&amp;&amp;</span><span class="token operator">!</span>tab2Window<span class="token punctuation">.</span>closed<span class="token punctuation">)</span><span class="token keyword">return</span><span class="token punctuation">;</span> <span class="token comment">//保证只能打开一个tab2Window窗口</span>
        tab2Window <span class="token operator">=</span> window<span class="token punctuation">.</span><span class="token function">open</span><span class="token punctuation">(</span><span class="token string">"tab2.html"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token function">start</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//每次点击都启动定时器</span>
    <span class="token punctuation">&#125;</span><span class="token punctuation">)</span>
    <span class="token keyword">function</span> <span class="token function">start</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>
        <span class="token keyword">let</span> timer <span class="token operator">=</span> <span class="token function">setInterval</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">&#123;</span>
            console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span>
            <span class="token keyword">if</span> <span class="token punctuation">(</span>tab2Window<span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>
                fromTab2<span class="token punctuation">.</span>innerHTML <span class="token operator">=</span> <span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">parse</span><span class="token punctuation">(</span>localStorage<span class="token punctuation">.</span><span class="token function">getItem</span><span class="token punctuation">(</span><span class="token string">"value"</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
            <span class="token punctuation">&#125;</span>
            <span class="token keyword">if</span> <span class="token punctuation">(</span>tab2Window <span class="token operator">&amp;&amp;</span> tab2Window<span class="token punctuation">.</span>closed<span class="token punctuation">)</span> <span class="token punctuation">&#123;</span> <span class="token comment">//监听tab2Window的状态如果关闭就清除定时器</span>
                <span class="token function">clearInterval</span><span class="token punctuation">(</span>timer<span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token punctuation">&#125;</span>

        <span class="token punctuation">&#125;</span><span class="token punctuation">,</span> <span class="token number">100</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">&#125;</span>

</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<p><code>tab2.html</code></p>
<div class="code-wrapper"><pre class="line-numbers language-html" data-language="html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h2</span><span class="token punctuation">></span></span> tab2页面<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h2</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>search<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
    <span class="token keyword">const</span> input <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">"#search"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    input<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"input"</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">&#123;</span>
        localStorage<span class="token punctuation">.</span><span class="token function">setItem</span><span class="token punctuation">(</span><span class="token string">"value"</span><span class="token punctuation">,</span> <span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span>event<span class="token punctuation">.</span>target<span class="token punctuation">.</span>value<span class="token punctuation">)</span><span class="token punctuation">)</span>
    <span class="token punctuation">&#125;</span><span class="token punctuation">)</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<p>结果展示<br><img src="http://qiniuyun.quancundexiwang.wang/Sep-02-2020%2021-42-21.gif" srcset="/img/loading.gif"></p>
<p>定时器优化效果 打开新标签页面关闭后，清除定时器。</p>
<p><img src="http://qiniuyun.quancundexiwang.wang/20200903001313.gif" srcset="/img/loading.gif"></p>

            </div>
            <hr>
            <div>
              <div class="post-metas mb-3">
                
                  <div class="post-meta mr-3">
                    <i class="iconfont icon-category"></i>
                    
                      <a class="hover-with-bg" href="/categories/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95/">前端面试</a>
                    
                  </div>
                
                
                  <div class="post-meta">
                    <i class="iconfont icon-tags"></i>
                    
                      <a class="hover-with-bg" href="/tags/JavaScript/">JavaScript</a>
                    
                  </div>
                
              </div>
              
                <p class="note note-warning">本博客所有文章除特别声明外，均采用 <a target="_blank" href="https://creativecommons.org/licenses/by-sa/4.0/deed.zh" rel="nofollow noopener noopener">CC BY-SA 4.0 协议</a> ，转载请注明出处！</p>
              
              
                <div class="post-prevnext">
                  <article class="post-prev col-6">
                    
                    
                      <a href="/posts/32406/">
                        <i class="iconfont icon-arrowleft"></i>
                        <span class="hidden-mobile">Webpack整理</span>
                        <span class="visible-mobile">上一篇</span>
                      </a>
                    
                  </article>
                  <article class="post-next col-6">
                    
                    
                      <a href="/posts/59122/">
                        <span class="hidden-mobile">MYSQL</span>
                        <span class="visible-mobile">下一篇</span>
                        <i class="iconfont icon-arrowright"></i>
                      </a>
                    
                  </article>
                </div>
              
            </div>

            
              <!-- Comments -->
              <article class="comments" id="comments">
                
                
  <div id="vcomments"></div>
  <script type="text/javascript">
    Fluid.utils.waitElementVisible('vcomments', function() {
      Fluid.utils.createScript('https://cdn.jsdelivr.net/npm/valine@1.4.14/dist/Valine.min.js', function () {
        new Valine({
          el: "#vcomments",
          app_id: "Mi65hxq7VAFUDwOLeIGAOgiV-gzGzoHsz",
          app_key: "hMuhiD4FRqhns4giqLiEH9HG",
          placeholder: "说点什么",
          path: window.location.pathname,
          avatar: "retro",
          meta: ["nick","mail","link"],
          pageSize: "10",
          lang: "zh-CN",
          highlight: false,
          recordIP: false,
          serverURLs: "",
        });
      });
    });
  </script>
  <noscript>Please enable JavaScript to view the
    <a target="_blank" href="https://valine.js.org" rel="nofollow noopener noopener">comments powered by Valine.</a>
  </noscript>


              </article>
            
          </article>
        </div>
      </div>
    </div>
    
      <div class="d-none d-lg-block col-lg-2 toc-container" id="toc-ctn">
        <div id="toc">
  <p class="toc-header"><i class="iconfont icon-list"></i>&nbsp;目录</p>
  <div class="toc-body" id="toc-body"></div>
</div>

      </div>
    
  </div>
</div>

<!-- Custom -->


    

    
      <a id="scroll-top-button" href="#" role="button">
        <i class="iconfont icon-arrowup" aria-hidden="true"></i>
      </a>
    

    
      <div class="modal fade" id="modalSearch" tabindex="-1" role="dialog" aria-labelledby="ModalLabel"
     aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header text-center">
        <h4 class="modal-title w-100 font-weight-bold">搜索</h4>
        <button type="button" id="local-search-close" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body mx-3">
        <div class="md-form mb-5">
          <input type="text" id="local-search-input" class="form-control validate">
          <label data-error="x" data-success="v"
                 for="local-search-input">关键词</label>
        </div>
        <div class="list-group" id="local-search-result"></div>
      </div>
    </div>
  </div>
</div>
    

    
  </main>

  <footer class="text-center mt-5 py-3">
  <div class="footer-content">
    

  </div>
  
  <div class="statistics">
    
    

    
      
        <!-- 不蒜子统计PV -->
        <span id="busuanzi_container_site_pv" style="display: none">
            总访问量 
            <span id="busuanzi_value_site_pv"></span>
             次
          </span>
      
      
        <!-- 不蒜子统计UV -->
        <span id="busuanzi_container_site_uv" style="display: none">
            总访客数 
            <span id="busuanzi_value_site_uv"></span>
             人
          </span>
      
    
  </div>


  
  <!-- 备案信息 -->
  <div class="beian">
    <span>
      <a href="http://beian.miit.gov.cn/" target="_blank" rel="nofollow noopener">
        豫ICP备20009912号-1
      </a>
    </span>
    
  </div>


  
</footer>

<!-- SCRIPTS -->

  <script  src="https://cdn.jsdelivr.net/npm/nprogress@0.2.0/nprogress.min.js" ></script>
  <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/nprogress@0.2.0/nprogress.min.css" />

  <script>
    NProgress.configure({"showSpinner":true,"trickleSpeed":100})
    NProgress.start()
    window.addEventListener('load', function() {
      NProgress.done();
    })
  </script>


<script  src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js" ></script>
<script  src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" ></script>
<script  src="/js/debouncer.js" ></script>
<script  src="/js/events.js" ></script>
<script  src="/js/plugins.js" ></script>

<!-- Plugins -->


  
    
      <script  src="/js/lazyload.js" ></script>
    
  



  
    
  



  <script  src="https://cdn.jsdelivr.net/npm/tocbot@4.12.0/dist/tocbot.min.js" ></script>



  <script  src="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js" ></script>



  <script  src="https://cdn.jsdelivr.net/npm/anchor-js@4.3.0/anchor.min.js" ></script>



  <script defer src="https://cdn.jsdelivr.net/npm/clipboard@2.0.6/dist/clipboard.min.js" ></script>



  <script defer src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js" ></script>




  <script  src="https://cdn.jsdelivr.net/npm/typed.js@2.0.11/lib/typed.min.js" ></script>
  <script>
    (function (window, document) {
      var typing = Fluid.plugins.typing;
      var title = document.getElementById('subtitle').title;
      
      typing(title)
      
    })(window, document);
  </script>



  <script  src="/js/local-search.js" ></script>
  <script>
    (function () {
      var path = "http://qiniuyun.quancundexiwang.wang/xmlSearch.xml";
      var inputArea = document.querySelector("#local-search-input");
      inputArea.onclick = function () {
        searchFunc(path, 'local-search-input', 'local-search-result');
        this.onclick = null
      }
    })()
  </script>















<!-- 主题的启动项 保持在最底部 -->
<script  src="/js/boot.js" ></script>



</body>
</html>
